<!-- 页码显示组件 -->
<template id="paginationTpl">
  <nav class="m-page" v-if="pageAll > 0">
    <span>共<i>{{trAll}}</i>条数据&nbsp;&nbsp;当前<i>{{pageCur}}</i>/<i>{{pageAll}}</i>页</span>
    <ul class="pagination">
      <li><a href="javascript:" @click="pageCur=1">首页</a></li>
      <li><a href="javascript:"  @click="toBefore">«</a></li>
      <li v-for="item in pageBtns" :class="{'active' : pageCur == item.index}">
        <a href="javascript:" @click="btnClick(item.index)" v-if="item.ispage">{{item.index}}</a>
        <span class="m-noborder" v-else>...</span>
      </li>
      <li><a  href="javascript:" @click="toNext">»</a></li>
      <li><a href="javascript:" @click="pageCur=pageAll">尾页</a></li>
    </ul>
  </nav>
</template>

<script type="text/javascript">
Vue.component('pagination',{
  template:'#paginationTpl',
  props:['trAll','pageCur','pageAll'],    //总数据数，当前页，总页数
  data(){
    return {
    }
  },
  watch:{
    // 点击页码更新数据
    "pageCur" : function(val,oldVal) {
      this.$emit('page-to',val);
    }
  },
  methods:{
    // 页码点击事件
    btnClick: function(index){
      if(index != this.pageCur){
        this.pageCur = index;
      }
    },
    // 展示页码按钮
    indexes : function(all,cur){
      var list = [];
      if(all <=5 ){
        for(var i=0 ; i<all ; i++){
          list.push({index:i+1,ispage:true});
        }
      }else{
        list.push({index:1,ispage:true})
        if(cur == 2){
          list.push({index:cur,ispage:true});
          list.push({index:'',ispage:false});
        }else if(cur == all - 1){
          list.push({index:'',ispage:false});
          list.push({index:cur,ispage:true});
        }else{
          list.push({index:'',ispage:false});
          if(cur==1 || cur==all){
            list.push({index:parseInt(all/2),ispage:true});
          }else{
            list.push({index:cur,ispage:true});
          }
          list.push({index:'',ispage:false});
        }
        list.push({index:all,ispage:true})
      }
      this.pageBtns = list;
    },
    //上一页
    toBefore(){
      if(this.pageCur > 1){
        this.pageCur--;
      }
    },
    //下一页
    toNext(){
      if(this.pageCur < this.pageAll){
        this.pageCur++;
      }
    }
  }
});
</script>
